<template>
  <div class="park-list-wrapper">
    <el-skeleton class="w-full" :loading="loading" :throttle="1500" animated :count="10">
      <template slot="template">
        <div class="flex py-[20px] mx-[20px] border-[#e0e4ed] border-b-[1px]">
          <el-skeleton-item variant="image" class="w-[254px] h-[160px]" />
          <div class="pl-[30px] flex flex-col justify-between">
            <el-skeleton-item variant="div" class="w-[400px]" />
            <el-skeleton-item variant="div" class="w-[200px]" />
            <div class="flex space-x-4">
              <el-skeleton-item variant="div" class="w-[100px]" />
              <el-skeleton-item variant="div" class="w-[100px]" />
              <el-skeleton-item variant="div" class="w-[100px]" />
            </div>
            <div class="flex space-x-4">
              <el-skeleton-item variant="div" class="w-[200px]" />
              <el-skeleton-item variant="div" class="w-[200px]" />
              <el-skeleton-item variant="div" class="w-[200px]" />
            </div>
          </div>
        </div>
      </template>

      <div v-if="mode === 'list'" class="list-mode">
        <LayoutListItem
          v-for="item in dataList"
          :key="item.id"
          :data-obj="item"
          @click="handleItemClick"
        />
      </div>

      <div v-if="mode === 'card'" class="card-mode">
        <ParkCardItem
          v-for="item in dataList"
          :key="item.id"
          :data-obj="item"
          @click="handleItemClick"
        />
      </div>
    </el-skeleton>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import LayoutListItem from '@/components/portal/LayoutListItem.vue'
import ParkCardItem from '@/components/portal/park/ParkCardItem.vue'

export default Vue.extend({
  components: { LayoutListItem, ParkCardItem },
  props: {
    mode: {
      type: String,
      default: 'card',
    },
    dataList: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  methods: {
    handleItemClick(id) {
      this.$router.push(`/park/detail/${id}`)
      // const path = this.$router.resolve({ path: `/park/detail/${id}` })
      // window.open(path.href, '_blank')
    },
  },
})
</script>
<style lang="scss" scoped>
.park-list-wrapper {
  @apply bg-white;

  .card-mode {
    @apply flex flex-wrap;
  }
}
</style>
